<template>
  <div id='wrap'>
    <h1>组件传值 props</h1>
    <!-- <scu1 :count :title></scu1> -->
    <hr>
    <scu1 :title="'子组件的标题'" :descript="des"></scu1>
    <hr>
    <p>{{ fTitle }}</p>
    <scu2 :title="'scu2子组件的标题'" :des="sd2Des" :propH="sd2PropsFuns"></scu2>
    <hr>
    <p>{{ fTitle }}</p>
    <hr>
    <scu3 :title="'scu3子组件的标题'" :des="sd3Des" :user="sd3User" :propH="sd3PropsFunc"></scu3>
    <p>{{ fTitle }}</p>
    <hr>
    <scu4 msg="'举杯邀明月,对影成三人'"></scu4>
    <hr>
    <scu5 msg="'举杯邀明月,对影成三人'"></scu5>
    <hr>
    <scu6 :msg="msg"></scu6>
    <button @click="edit">父组件的改变按钮</button>
    <hr>
    <scu7 title="'床前明月光,疑是地上霜'" :user msg="'躺尸七天'"></scu7>
    <hr>
    <scu8 title="'床前明月光,疑是地上霜'" :user msg="'躺尸七天'"></scu8>
    <hr>
    <!-- <scu9 title="'床前明月光,疑是地上霜'" :user msg="'躺尸七天'"></scu9> -->
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu17',
}
</script>

<script lang='ts' setup>
import { ref } from 'vue'
import  scu1  from "./component/scu1.vue";
import  scu2  from "./component/scu2.vue";
import  scu3  from "./component/scu3.vue";
import  scu4  from "./component/scu4.vue";
import  scu5  from "./component/scu5.jsx";
import  scu6  from "./component/scu6.vue";
import  scu7  from "./component/scu7.vue";
import  { type Iuser }  from "./component/scu7.vue";
import  scu8  from "./component/scu8.vue";
// import  scu9  from "./component/scu9.vue";
// const count=ref(10)
// const title='标题内容'
const des=99999
const fTitle=ref('')
const sd2Des=ref('传入的des')
const sd2PropsFuns=(sonTtile:string,fc:Function)=>{
    fTitle.value=sonTtile
    fc()
    console.log('这是一个父组件的函数,他被传入了子组件',sonTtile);
}
const sd3Des=ref('传入的des')
const sd3User=ref({
    name:'小绿',
    sex:0
})
const sd3PropsFunc=(sonTitle:string,fc:Function)=>{
    fTitle.value=sonTitle
    fc()
    console.log('这是一个父组件的函数,他被传入了子组件',sonTitle);
}
const msg=ref('举杯邀明月,对影成三人')
const edit=()=>{
    msg.value='我是改变后的msg:举杯邀明月,对影成三人'
}
const user=ref<Iuser>({
    age:16,
    name:'小红',
    sex:'女'
})
</script>

<style scoped lang='scss'>

</style>